<template>
  <div class="title">星轻食</div>
  <el-carousel :interval="4000" type="card" height="400px" indicator-position="outside" style="padding: 10px;">
    <el-carousel-item v-for="item in imgList" :key="item">
      <img :src="item" alt="美食图片" class="w-full h-full object-cover">
    </el-carousel-item>
  </el-carousel>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const imgList = ref([
  'https://img0.baidu.com/it/u=1381020003,4261594589&fm=253&fmt=auto&app=120&f=JPEG?w=1199&h=800',
  'https://img2.baidu.com/it/u=3719056261,746364903&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800',
  'https://img2.baidu.com/it/u=1481453138,1761422911&fm=253&fmt=auto&app=120&f=JPEG?w=1208&h=800',
  'https://img1.baidu.com/it/u=1125195380,2195371869&fm=253&fmt=auto?w=1201&h=800',
  'https://img1.baidu.com/it/u=246667029,4041575203&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800',
  'https://img1.baidu.com/it/u=3108074621,3637519674&fm=253&fmt=auto&app=138&f=GIF?w=750&h=500'  
])
</script>
<style scoped lang="scss">
.title {
  display: flex;
  font-size: 24px;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  font-weight: bold;
}

img {
  height: 100%;
  object-fit: contain;
}
</style>
